import React, { useRef, useEffect } from "react";
// NOTE: ScrollMagic 是一款jQuery插件,它让你可以像使用进度条一样使用滚动条。
import ScrollMagic from "scrollmagic";
import MacVideo from "../../videos/Mac.mp4";
import '../../css/my/homemac.css'

function HomeMac() {
    let controller = new ScrollMagic.Controller()
    let videoDivRef = useRef(null)
    let videoRef = useRef(null)
    function clickMac() {
        window.location.href = '/'
    }
    useEffect(() => {
        let sence = new ScrollMagic.Scene({
            duration: 350,
            triggerElement: videoDivRef,
            triggerHook: 0.5
        }).addTo(controller);
        //
        sence.on('enter', () => {
            videoRef.play()
        })
    }, [])


    return (<div onClick={() => clickMac()} style={{ cursor: 'pointer' }}>
        <div style={{ background: "white" }}>
            <h1 style={{ color: 'black' }}> Mac</h1>
            <h2>你的生产力工具</h2>
            <a href='/' >Learn more &gt; </a>
            <a href='/' >Buy now &gt;</a>
        </div>
        <div ref={e => (videoDivRef = e)}>
            <video ref={e => (videoRef = e)} src={MacVideo}
                type="video/mp4"
                muted="muted"
            ></video>
        </div>
    </div>)

}
export default HomeMac;
